<template>
  <div class="mark-result-card" @click="toDetail">
    <MediaWrap
      class="audio-wrap"
      :url="instance.picture"
      :width="180"
      :height="180"
    ></MediaWrap>
    <div class="result-body-card">
      <div class="result-text single-omit">{{ instance.patentName }}</div>
      <!-- <div class="operation-wrap">
        <a-button @click="handleTrans">转让</a-button>
        <a-button @click="handlePermit">许可</a-button>
      </div> -->
      <div class="operation-wrap">
        <div class="price" v-if="resultInstance.priceRange === -1">
          价格：面议
        </div>
        <div class="price" v-else>价格：{{ resultInstance.priceRange }}</div>
        <a-button
          @click="handleTrans"
          :style="{ backgroundColor: operationColor }"
          >{{ resultInstance.operationTypeStr }}</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { viewResultInfo } from '@/api/tradingInfos';
import mixinsBackStack from '@/views/backstageSupport/mixins';

export default {
  mixins: [mixinsBackStack],
  props: {
    instance: Object,
  },
  data() {
    return {
      resultInstance: {},
      operationColor: '',
      colorMap: {
        0: '#27CEE2', // 转让
        1: '#0099FF', // 许可
        2: '#0069D1', // 质押
      },
    };
  },
  created() {
    this.resultInstance = { ...this.instance };
    this.handlerResultMappings([this.resultInstance]); // 处理数据的映射关系
    this.operationColor = this.colorMap[this.resultInstance.operationType];
  },
  methods: {
    toDetail() {
      const { id } = this.instance;
      viewResultInfo(id).then();
      this.$router.push({ name: 'detailDeal', query: { id } });
    },
    handleTrans(e) {
      e.stopPropagation();
      // console.log('转让')
    },
    handlePermit(e) {
      e.stopPropagation();
      // console.log('许可')
    },
  },
};
</script>
